<template>
  <div>
    <div class="header">
      <!-- Navigator Mini Bar -->
      <wxc-minibar :title="language.title"
                    background-color="#fcfcfc">
        <div slot="left">
          <i class="iconfont icon-back"></i>
        </div>
      </wxc-minibar>
    </div>
    <div class="content">
      <list class="item-container">
        <cell class="border-cell"></cell>
        <cell v-for="(item,key) in itemList"
              class="cell"
              :key="item.id">
          <div class="content">
            <div class="item-image" :style="{ 'background-image': 'url(' + item.avatar + ')'}"></div>
            <div class="item-info">
              <div class="title">
                <text>{{item.title}}</text>
              </div>
              <div class="attributes">
                <text>{{item.attributeTitle}}</text>
              </div>
              <div class="price">
                <text :class="item.symbol">{{item.price}}</text>
                <wxc-stepper
                  :default-value="item.number"
                  max="99"
                  min="0"
                  :read-only="true"
                  @wxcStepperValueChanged="event => wxcStepperValueChanged(event, key)"></wxc-stepper>
              </div>
            </div>
          </div>
        </cell>
      </list>
    </div>
    <div class="footer">
      <list class="list-box">
        <cell class="bill-cell">
          <div class="bill">
            <text>{{language.total}}</text>
            <text class="price">{{totalPrice}}</text>
          </div>
          <div class="order" @click="createOrder()">
            <text>{{language.orders}}</text>
          </div>
        </cell>
      </list>
    </div>
  </div>
</template>

<style lang="scss">
  .price {
    .wxc-stepper {
      .stepper-plus,
      .stepper-minus,
      .stepper-input {
        width: 50px;
      }

      .stepper-plus {
        background-color: #ededed;
        border-radius: 0 20px 20px 0;

        .stepper-icon {
          color: #454545 !important;
          margin-top: 0;
        }
      }

      .stepper-minus {
        background-color: #ededed;
        border-radius: 20px 0 0 20px;

        .stepper-icon {
          color: #454545 !important;
          margin-top: 0;
        }
      }

      .stepper-input {
        background-color: #ededed;
        color: #454545;
        border: 0.5px dotted #8e8e8e;
        border-top: none;
        border-bottom: none;
        outline: none;
        border-radius: 0;

        &:disabled {
          color: #454545;
          -webkit-text-fill-color:#454545;
          -webkit-opacity:1;
          opacity: 1;
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  .header{
    position: fixed;
    top:0px;
    z-index:99999;
  }
  .content {
    margin-top:40px;
    .item-container {
      width: 750px;
      padding-bottom: 20%;

      .border-cell {
        background-color: #FBFBFB;
        width: 750px;
        height: 24px;
        align-items: center;
        justify-content: center;
      }

      .content {
        width:750px;
        height:250px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: row;
        padding: 0 25px;
        justify-content: flex-start;
        margin-bottom: 25px;

        .item-image {
          width: 250px;
          height: 250px;
          background-size: cover;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
          background-position: center;
        }

        .item-info {
          width: 450px;
          height: 250px;
          padding: 25px 25px 25px 40px;
          flex-direction: column;
          min-width: 0;
          background-color: #FFFFFF;
          box-shadow: 1px 1px 0.06667rem rgba(204,204,204, 0.5);
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          position: relative;

          .title {
            p {
              height: 60px;
              line-height: 60px;
              font-size: 30px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: block;
            }
          }

          .attributes {
            p {
              height: 60px;
              line-height: 60px;
              color: #757575;
              font-size: 30px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: block;
            }
          }

          .price {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            p {
              height: 110px;
              line-height: 110px;
              overflow: hidden;
              color: #f45551;
              font-size: 46px;

              &.yen:before {
                content: "¥";
                font-size: 30px;
                padding-right: 10px;
              }

              &.mop:before {
                content: "mop";
                font-size: 30px;
                padding-right: 5px;
              }
            }
          }

          .icon-add {
            color: #f45551;
            font-size: 46px;
          }

          .fixed {
            position: absolute;
            bottom: 28px;
            right: 28px;
          }

        }
      }
    }
  }

    .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height:135px;
    .list-box {
      .weex-list-inner {
        display: none;

        .bill-cell {
          flex-direction: row;
          justify-content: space-between;
          flex: 1;

          .bill {
            flex-direction: row;
            padding: 46px;
            flex: 1;
            border-top: 1px solid #DFDFDF;
            background: #ffffff;

            .price {
              line-height: 100%;
              font-size: 40px;
              color: #f45551;

              &:before {
                content: "mop";
                font-size: 30px;
                margin-right: 5px;
              }
            }
          }

          .order {
            padding: 40px;
            min-width: 200px;
            align-items: center;
            background-color: #f45551;
            border-top: 1px solid #f45551;
            flex: .7;

            > p {
              color: #ffffff;
            }
          }
        }
      }
    }
  }
</style>

<script>
import Vue from 'vue'
import Qs from 'qs'
import { WxcMinibar, Utils, WxcStepper } from 'weex-ui'
import { createOrder } from '@/api/order'
import { i18n } from '@/renderer/modules/lang'
export default {
  components: { WxcMinibar, Vue, Utils, WxcStepper },
  data: () => ({
    itemList: [],
    totalPrice: 0,
    language: {
      title: i18n.t('shopping.title'),
      total: i18n.t('shopping.total'),
      orders: i18n.t('shopping.orders')
    },
    shoppingCartData: localStorage.getItem('shoppingCart') ? JSON.parse(localStorage.getItem('shoppingCart')) : {}
  }),
  created () {
    this.getShoppingCartList()
  },
  methods: {
    handleTotalPrice () {
      let totalPrice = 0
      for (let key in this.itemList) {
        totalPrice = parseFloat(totalPrice) + parseFloat(this.itemList[key].price)
      }
      this.totalPrice = totalPrice.toFixed(2)
    },
    getShoppingCartList () {
      let shoppingCartData = localStorage.getItem('shoppingCart') ? JSON.parse(localStorage.getItem('shoppingCart')) : {}
      let totalPrice = 0
      for (let key in shoppingCartData) {
        if (shoppingCartData[key].attributes) {
          for (let attributeKey in shoppingCartData[key].attributes) {
            this.itemList.push({
              id: parseInt(Math.random() * 1000),
              food_id: key,
              attribute_id: attributeKey,
              title: shoppingCartData[key].title,
              avatar: shoppingCartData[key].avatar,
              number: shoppingCartData[key].attributes[attributeKey].number,
              unitPrice: shoppingCartData[key].attributes[attributeKey].unitPrice,
              price: (parseFloat(shoppingCartData[key].attributes[attributeKey].unitPrice) * parseFloat(shoppingCartData[key].attributes[attributeKey].number)).toFixed(2),
              symbol: shoppingCartData[key].symbol,
              attributeTitle: shoppingCartData[key].attributes[attributeKey].title,
              attrs: shoppingCartData[key].attributes[attributeKey].attrs
            })
            totalPrice = totalPrice + parseFloat(shoppingCartData[key].attributes[attributeKey].unitPrice) * parseFloat(shoppingCartData[key].attributes[attributeKey].number)
          }
        } else {
          this.itemList.push({
            id: parseInt(Math.random() * 1000),
            food_id: key,
            title: shoppingCartData[key].title,
            avatar: shoppingCartData[key].avatar,
            number: shoppingCartData[key].number,
            unitPrice: parseFloat(shoppingCartData[key].unitPrice),
            price: (parseFloat(shoppingCartData[key].unitPrice) * parseFloat(shoppingCartData[key].number)).toFixed(2),
            symbol: shoppingCartData[key].symbol,
            attributeTitle: ''
          })
          totalPrice = totalPrice + parseFloat(shoppingCartData[key].unitPrice) * parseFloat(shoppingCartData[key].number)
        }
      }

      this.totalPrice = totalPrice.toFixed(2)
    },
    handleFood (shoppingCartData, num, foodId) {
      if (num < 1) {
        Vue.delete(shoppingCartData, foodId)
      } else {
        shoppingCartData[foodId].number = num
      }

      return shoppingCartData
    },
    handleAttribute (shoppingCartData, num, foodId, attributeId) {
      if (num < 1) {
        Vue.delete(shoppingCartData[foodId].attributes, attributeId)
      } else {
        shoppingCartData[foodId].attributes[attributeId].number = num
      }

      let foodNum = 0
      for (let key in shoppingCartData[foodId].attributes) {
        foodNum = parseFloat(foodNum) + parseFloat(shoppingCartData[foodId].attributes[key].number)
      }
      shoppingCartData[foodId].number = foodNum

      if (Object.keys(shoppingCartData[foodId].attributes).length < 1) Vue.delete(shoppingCartData, foodId)

      return shoppingCartData
    },
    wxcStepperValueChanged (event, index) {
      let shoppingCartData = localStorage.getItem('shoppingCart') ? JSON.parse(localStorage.getItem('shoppingCart')) : {}
      let num = event.value
      let foodId = this.itemList[index].food_id
      let attributeId = this.itemList[index].attribute_id ? this.itemList[index].attribute_id : ''

      if (num < 1) {
        Vue.delete(this.itemList, index)
      } else {
        this.itemList[index].number = num
        this.itemList[index].price = (parseFloat(this.itemList[index].unitPrice) * parseFloat(num)).toFixed(2)
      }

      shoppingCartData = attributeId ? this.handleAttribute(shoppingCartData, num, foodId, attributeId) : this.handleFood(shoppingCartData, num, foodId)

      localStorage.setItem('shoppingCart', JSON.stringify(shoppingCartData))

      this.handleTotalPrice()
    },
    createOrder () {
      let foods = []
      for (let key in this.itemList) {
        let food = {
          food_id: this.itemList[key].food_id,
          num: this.itemList[key].number
        }
        if (this.itemList[key].attrs) food.attrs = this.itemList[key].attrs
        foods.push(food)
      }
      let data = Qs.stringify({
        system_type: localStorage.getItem('system_type'),
        timestamp: localStorage.getItem('timestamp'),
        key: localStorage.getItem('key'),
        token: localStorage.getItem('token'),
        merchant_id: localStorage.getItem('merchant_id'),
        table_id: '1',
        foods: foods
      })
      createOrder(data).then(res => {
        localStorage.setItem('order_id', res.data.order_id)
        localStorage.removeItem('shoppingCart')
        this.$router.push({path: '/mine-order'})
      }).catch(err => {
        console.log(err.message)
      }).finally(() => {})
    }
  }
}
</script>
